<template>
  <div class="form_item-iconfont flex" style="display: inline-flex;">
    <p style="line-height: 1;">
      <i v-if="value" style="font-size: 34px;" :ico="this_value[0]" :class="this_value[1]"></i>
    </p>
    <template v-if="!is_info">
      <input type="hidden" :name="name" :value="value">
      <el-button :type="'primary'" @click="show_select=true" :size="size">选择图标</el-button>

      <el-dialog v-model="show_select" width="80%" :draggable="true"  style="height: 80vh;margin: auto;margin-top: 10vh;">
        <div style="width: 100%;height: 100%;overflow: auto;">
          <div v-for="(arr, ico) in ico_map" class="flex" style="flex-wrap: wrap;line-height: 1;padding: 5px;">
            <i v-for="cname in arr" @click="onclick(ico+' '+cname)" style="font-size: 50px;" :ico="ico" :class="cname" :title="cname"></i>
          </div>
        </div>
      </el-dialog>
    </template>
  </div>
</template>

<script>
import '@/assets/iconfont.css';
import '@/assets/vant-icon.css';
import s94Mjs from "s94-js";

export default {
  _title_: '字体图标',
  _can_config_: true,
  _can_form_param_: true,
  name: "iconfont",
  props: ['name', 'value', 'config', 'is_info', 'size', 'is_list'],
  emits: ['update:value', 'change'],
  data(){
    var ico_map = {
      'iconfont': ['icon-gouwudai','icon-shouye','icon-fabu','icon-kechengtixi','icon-wodewo'],
      'vant-icon': ['exchange','eye','enlarge','expand-o','eye-o','expand','filter-o','fire','fail','failure','fire-o','flag-o','font','font-o','gem-o','flower-o','gem','gift-card','friends','friends-o','gold-coin','gold-coin-o','good-job-o','gift','gift-o','gift-card-o','good-job','home-o','goods-collect','graphic','goods-collect-o','hot-o','info','hotel-o','info-o','hot-sale-o','hot','like','idcard','invitation','like-o','hot-sale','location-o','location','label','lock','label-o','map-marked','logistics','manager','more','live','manager-o','medal','more-o','music-o','music','new-arrival-o','medal-o','new-o','free-postage','newspaper-o','new-arrival','minus','orders-o','new','paid','notes-o','other-pay','pause-circle','pause','pause-circle-o','peer-pay','pending-payment','passed','plus','phone-circle-o','phone-o','printer','photo-fail','phone','photo-o','play-circle','play','phone-circle','point-gift-o','point-gift','play-circle-o','shrink','photo','qr','qr-invalid','question-o','revoke','replay','service','question','search','refund-o','service-o','scan','share','send-gift-o','share-o','setting','points','photograph','shop','shop-o','shop-collect-o','shop-collect','smile','shopping-cart-o','sign','sort','star-o','smile-comment-o','stop','stop-circle-o','smile-o','star','success','stop-circle','records','shopping-cart','tosend','todo-list','thumb-circle-o','thumb-circle','umbrella-circle','underway','upgrade','todo-list-o','tv-o','underway-o','user-o','vip-card-o','vip-card','send-gift','wap-home','wap-nav','volume-o','video','wap-home-o','volume','warning','weapp-nav','wechat-pay','warning-o','wechat','setting-o','youzan-shield','warn-o','smile-comment','user-circle-o','video-o','add-square','add','arrow-down','arrow-up','arrow','after-sale','add-o','alipay','ascending','apps-o','aim','award','arrow-left','award-o','audio','bag-o','balance-list','back-top','bag','balance-pay','balance-o','bar-chart-o','bars','balance-list-o','birthday-cake-o','bookmark','bill','bell','browsing-history-o','browsing-history','bookmark-o','bulb-o','bullhorn-o','bill-o','calendar-o','brush-o','card','cart-o','cart-circle','cart-circle-o','cart','cash-on-deliver','cash-back-record','cashier-o','chart-trending-o','certificate','chat','clear','chat-o','checked','clock','clock-o','close','closed-eye','circle','cluster-o','column','comment-circle-o','cluster','comment','comment-o','comment-circle','completed','credit-pay','coupon','debit-pay','coupon-o','contact','descending','desktop-o','diamond-o','description','delete','diamond','delete-o','cross','edit','ellipsis','down','discount','ecard-pay','envelop-o','shield-o','guide-o'],
      // 'u-icon': ['arrow-left','arrow-right','arrow-down','arrow-up','arrow-leftward','arrow-rightward','arrow-upward','arrow-downward','error-circle-fill','error-circle','twitter','twitter-circle-fill','download','checkbox-mark','mic-off','mic','column-line','pause','chat-fill','chat','star-fill','star','phone-fill','phone','map-fill','map','tags-fill','tags','bookmark-fill','bookmark','calendar-fill','calendar','trash-fill','trash','checkmark-circle','checkmark-circle-fill','close-circle-fill','close-circle','share','share-fill','edit-pen','edit-pen-fill','clock-fill','clock','facebook-circle-fill','facebook','eye-off','eye-off-outline','eye-fill','eye','arrow-down-fill','arrow-up-fill','play-left-fill','play-right-fill','play-left','play-right','photo-fill','photo','volume-off-fill','volume-off','volume-fill','volume','red-packet-fill','red-packet','man-delete','person-delete-fill','man-add','man-add-fill','info-circle-fill','info-circle','level','folder','movie','apple-fill','chrome-circle-fill','backspace','attach','cut','empty-car','empty-coupon','empty-address','empty-favor','empty-permission','empty-news','empty-search','github-circle-fill','rmb','reload','order','server-man','search','fingerprint','more-dot-fill','scan','share-square','minus','plus','info','question','error','close','checkmark','android-circle-fill','android-fill','ie','IE-circle-fill','google','google-circle-fill','setting-fill','setting','minus-square-fill','plus-square-fill','heart','heart-fill','camera','camera-fill','more-circle','more-circle-fill','bag-fill','bag','question-circle-fill','question-circle','shopping-cart','shopping-cart-fill','bell','bell-fill','list','list-dot','zhihu','zhihu-circle-fill','zhifubao','zhifubao-circle-fill','weixin-circle-fill','weixin-fill','taobao-circle-fill','taobao','weibo-circle-fill','weibo','qq-fill','qq-circle-fill','moments-circel-fill','moments','qzone','qzone-circle-fill','baidu-circle-fill','baidu','car','car-fill','warning-fill','warning','email','email-fill','minus-circle','minus-circle-fill','plus-circle','plus-circle-fill','file-text','file-text-fill','pushpin','pushpin-fill','grid','grid-fill','play-circle','play-circle-fill','pause-circle-fill','pause-circle','gift-fill','gift','rmb-circle-fill','rmb-circle','kefu-ermai','server-fill','coupon-fill','coupon','integral','integral-fill','home-fill','home','hourglass-half-fill','hourglass','account','plus-people-fill','minus-people-fill','account-fill','thumb-down-fill','thumb-down','thumb-up','thumb-up-fill','lock-fill','lock-open','lock-opened-fill','lock','rewind-left-fill','rewind-right-fill','skip-back-left','skip-forward-right','rewind-right','rewind-left','arrow-right-double','arrow-left-double','wifi-off','wifi','empty-data','empty-history','empty-list','empty-page','empty-order','man','woman','zh','en'],
    }
    return {
      need_display: true,
      this_value: this.decode_value(), //[ico, class]

      ico_map: ico_map,
      show_select: false,
    }
  },
  methods: {
    decode_value(){
      return this.value ? s94Mjs.to_string(this.value).split(' ') : ['', ''];
    },
    update_value(v, dont_display){
      if (!dont_display){
        this.need_display = false;
        setTimeout(()=>{this.need_display = true;},5);
      }
      this.$emit('update:value', v);
      this.$emit('change', v);
    },
    onclick(v){
      this.update_value(v, true);
      this.show_select = false;
    },
  },
  watch: {
    value(v, oldV){
      if (!this.need_display) return;
      this.this_value = this.decode_value();
    },
  },
  computed: {
  },
}
</script>

<style scoped>

</style>